<script setup lang="ts">
import { reactive, watch, ref } from 'vue';
// let arr = reactive<number[]>([])
// 异步赋值页面没有做到同步,可以使用拓展运算push进去 还可以定义type类型
// setTimeout(() => {
//   const newArr = [1, 2, 3, 4]
//   arr.push(...newArr)
//   console.log(arr);

// }, 1000)
let num = ref<string>('')
setTimeout(() => {
  message.list = [1, 2, 3, 4]

}, 1000)


// 定义类型
type O = {
  list: number[]
}
type Props = {
  data:number[]
}
// 父组件组件传值的方法 defineProps()  是一个函数
defineProps<Props>()
let message = reactive<O>({
  list: []
})
// 子传父使用defineEmits(['方法名']),在下面的点击事件函数中传值
let tableList =reactive<number[]>([0,0,0,0])
const emit = defineEmits(['getList'])
const btn = () => {
    emit('getList',tableList)
}



//  watch 监听 接收三个参数(数据源,cb(新,旧)),
// 监听多个ref会变成数组,reactive可以深度监听 不加deep都可以
// 监听reactive里面的值可以写一个函数 ()=>num.name.
// watchEffect可以接收一个函数用于停止监听
watch(num, (newVal, oldVal) => {
  console.log('x', newVal);
  console.log('j', oldVal);

})
</script>

<template>
  <div class="div">{{ message }}</div>
  <input type="text" v-model="num">
  <div>{{data}}</div>
  <button @click="btn">点击</button>
</template>

<style scoped>
.div {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
